<template>
	<div class="w-page w-person">
		<!-- 头部 -->
		<Header navNum="1"  @isSearch='isSearch'></Header>
		<!-- 内容 -->
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<!-- 正文内容开始 -->
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<!-- 左侧开始 -->
						<Leftcard class="w-card-left shrink0" :isBackHome="isBackHome" :deAcBig="acBig" :menuList="menuList" :columnName="columnName" @aa="out" :isBottom='false'></Leftcard>
						<!-- 左侧结束 -->
						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}"><span @click="toBackHome">{{ columnName }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
									<el-breadcrumb-item v-if="isdetail==1||isdetail==2">详情</el-breadcrumb-item>
									<el-breadcrumb-item v-if="isdetail==3">申请发票</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-mainhtml" v-if="isdetail==0">
								<div class="w-tabtitle" v-if="title2==''">{{title}}</div>
								<div class="w-tabtitle" v-else-if="title2!=''&&acBig=='5'&&acSml=='1'&&infostatus==true">{{title}}<span @click="modify">修改</span></div>
								<div class="w-tabtitle" v-else>{{title2}}</div>
								<div v-if="acBig=='1'">
									<div class="flex vc hs">
										<div class="moneybox flex vc hs">
											<p>累计捐赠金额：</p>
											<p class="w-total">￥{{ donateCount.sum || 0 }}</p>
										</div>
										<div class="moneybox flex vc">
											<p>已捐赠项目数：</p>
											<p class="w-total">{{ donateCount.count || 0 }}个</p>
										</div>
									</div>
									<el-table :data="tableData" stripe style="width: 100%" class="w-table">
										<el-table-column prop="projectTitle" label="捐赠项目" width="220"></el-table-column>
										<el-table-column prop="createDate" label="日期"></el-table-column>
										<el-table-column prop="donate" label="捐赠金额(元)" width="220"></el-table-column>
										<el-table-column label="捐赠证书" fixed="right">
											<template slot-scope="scope">
<!--												<el-button class="w-tablebtn" @click="handleEdit(scope.$index, scope.row)">查看</el-button>-->
                        <el-button class="w-tablebtn" @click="lookCert(scope.row.certificateImg)">查看</el-button>
											</template>
										</el-table-column>
									</el-table>
									<el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
									 :total="total">
									</el-pagination>
								</div>
								<div v-else-if="acBig=='2'">
									<ul class="w-already flex wrap vc hb">
										<li v-for="(v,i) in userProjects" :key='i' @click="todetail(v.id)">
											{{v.projectTitle}}
										</li>
									</ul>
								</div>
								<!-- 证书 -->
								<div v-else-if="acBig=='3'">
									<div v-show="cershowId==0" class="cershow flex wrap hs vc">
										<img src="../assets/img/index/cer.png" alt="" v-for="(item,index) in userDonateLogList">
									</div>
								</div>

								<div v-else-if="acBig=='4'">
									<div>
										<ul class="billul">
											<li v-for="(v,i) in List" :key="i" class="flex hs vc wrap">
												<div>付款方：{{v.name}}</div>
												<div>发票金额：¥ {{v.donate}}</div>
												<div>开票时间：{{v.donateDate}}</div>
											</li>
										</ul>
										<el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
										 :total="total">
										</el-pagination>
									</div>
								</div>

								<div v-else-if="acBig=='5'&&acSml==1">
									<el-form ref="form" :model="infosizeForm" label-width="120px" class="user_info_edit">
										<el-form-item label="账号">
											<el-input v-model="infosizeForm.username" :disabled="true" placeholder="请输入账号"></el-input>
										</el-form-item>
										<el-form-item label="姓名">
											<el-input v-model="infosizeForm.nickname" :disabled="infostatus" placeholder="请输入姓名"></el-input>
										</el-form-item>
										<el-form-item label="身份">
											<el-tag v-if="infosizeForm.alumna"> 校友</el-tag>
											<el-tag v-else="infosizeForm.alumna">非校友</el-tag>
										</el-form-item>
										<el-form-item label="单位名称">
											<el-input v-model="infosizeForm.companyName" :disabled="infostatus" placeholder="请输入单位名称"></el-input>
										</el-form-item>
										<el-form-item label="单位地址">
											<el-input v-model="infosizeForm.companyAddress" :disabled="infostatus" placeholder="请输入单位地址"></el-input>
										</el-form-item>
										<el-form-item label="邮箱">
											<el-input v-model="infosizeForm.email" type="email" :disabled="infostatus" placeholder="请输入邮箱"></el-input>
										</el-form-item>
										<el-form-item label="联系方式">
											<el-input v-model="infosizeForm.mobileNumber" maxlength="11" :disabled="infostatus" placeholder="请输入联系方式"></el-input>
										</el-form-item>
                    <el-form-item v-if="!infostatus">
                      <el-button type="primary" @click="infoOnSubmit()">提交</el-button>
                    </el-form-item>
									</el-form>
								</div>

								<div v-else-if="acBig=='5'&&acSml==2">
									<el-form style="display: none;"></el-form>
									<el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="120px" class="demo-ruleForm">
										<el-form-item label="密码" prop="pass">
											<el-input type="password" v-model="passForm.pass" placeholder="请填写原密码" autocomplete="off"></el-input>
										</el-form-item>
										<el-form-item label="新密码" prop="new">
											<el-input type="password" v-model="passForm.new" placeholder="请填写新密码" autocomplete="off"></el-input>
										</el-form-item>
										<el-form-item label="确认新密码" prop="checkPass">
											<el-input type="password" v-model="passForm.checkPass" placeholder="请再次填写确认新密码" autocomplete="off"></el-input>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="passOnSubmit('passForm')">提交</el-button>
										</el-form-item>
									</el-form>
								</div>
								<div v-else>
									<div class="w-con">暂无</div>
								</div>
							</div>
							<!-- 详情开始 -->
							<div v-if="isdetail==3" class="w-box4-2">
								<voiceForm :id="billId"></voiceForm>
							</div>
							<!-- 详情结束 -->
							<!-- 详情开始 -->
							<div class="w-detail" v-if="isdetail==2">
								<div class="w-tabtitle">捐赠记录</div>
								<div class="w-tabcon">
									<div class="w-billformbox flex hb vc">
										<ul>
											<li>捐款项目：{{ donateDetail.projectTitle }}</li>
											<li>捐款时间：{{ donateDetail.createDate }}</li>
											<li>捐款金额：¥{{donateDetail.objective}}</li>
										</ul>
										<div class="w-billform flex hc vc" @click="billform(donateDetail.id)">
											<p>申请发票</p>
											<img src="../assets/img/index/clickto.png" alt="" class="clickimg">
										</div>
									</div>
									<div class="w-cerimgbox">
										<img src="../assets/img/index/prove.png" alt="" class="w-img">
										<div class="w-conbox">
											<div class="w-num">证书编号：{{donateDetail.certificate}}</div>
											<div class="w-title">亲爱的{{donateDetail.name}}：</div>
											<div class="w-con">
												感谢您向山西师范大学，向本校学生培养基金-奖学金项目捐赠，我们谨向您致以最诚挚的敬意和感谢，您的爱心将永载山西师范大学史册，愿我们携手共进，共同见证山西师范大学美好的明天！
											</div>

										</div>
										<div class="w-bottombox">
											<div class="w-schoolbox">
												<p class="w-school">山西师范大学</p>
												<p class="w-school">教育发展基金会</p>
												<p class="w-date">{{donateDetail.createDate}}</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 详情结束 -->
							<!-- 详情开始 -->
							<div class="w-detail" v-if="isdetail==1">
								<detailPage :info='info'></detailPage>
							</div>
							<!-- 详情结束 -->
						</div>
					</div>
				</div>
				<!-- 正文内容 结束 -->
			</div>
		</div>

    <el-dialog class="person_dialog" :visible.sync="dialogImageVisible" :show-close="false">
      <div class="dialog_header">
        <img src="../assets/img/index/close.png" alt="" ondragstart="return false" @click="dialogImageVisible = false">
      </div>

      <div class="dialog_body">
        <img :src="currentCert" alt="" ondragstart="return false" @click="openImg">
      </div>

      <div class="dialog_footer">
        <div class="download_box" @click="downloadImg">
          <img src="../assets/img/index/download.png" alt="" ondragstart="return false">
          <span>下载证书</span>
        </div>
      </div>
    </el-dialog>

		<!-- 底部开始 -->
		<Footer></Footer>
		<!-- 底部结束 -->
	</div>
</template>

<script>
	import '../style/content-styles.css'

	// 组件
	import detailPage from "./common/detail" //详情
	import voiceForm from "./formbox/invoiceform" //申请发票

	// api
	import {
		donateList,
		userDonateList,
		userDonateLogList,
    userDonateCount
	} from '@/api/donate' //捐赠者列表
	import {
		invoiceList
	} from '@/api/invoice'
	import {
		projectDetail
	} from '@/api/project'
	import {
		userInfo
	} from '@/api/login'
  import {changeInfo, changePassword} from "../api/user";


	export default {
		components: {
			"voiceForm": voiceForm,
			"detailPage": detailPage
		},
		data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入原密码'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'))
        } else if (value === this.passForm.pass) {
          callback(new Error('新旧密码不能相同'))
        } else if (value.length < 8 || value.length > 16) {
          callback('密码长度为8-16位')
        } else {
          let regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,16}$/

          if (regex.test(value)) {
            if (this.passForm.checkPass !== '') {
              this.$refs.passForm.validateField('checkPass')
            }
            callback()
          } else {
            callback('密码由数字、大写字母、小写字母及特殊字符任意三种及以上组成')
          }
        }
      };
      var validatePass3 = (rule, value, callback) => {
        console.log(value)
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.passForm.new) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
				List: [], // 发票列表
				page: 1,
				size: 10,
				total: 0,
				passForm: {
					pass: '',
					new: '',
          checkPass: ''
				},
				rules: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
          new: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
					checkPass: [{
						validator: validatePass3,
						trigger: 'blur'
					}]
				},
				infostatus: true,
				infosizeForm: {
					account: '15899008866',
					name: '王建峰',
					identity: '社会人士',
					compName: '环保局',
					compAddr: '太原市环保路34号',
					addr: '太原市府西街23号',
					email: '',
					phone: '15899008866'
				},
				billsizeForm: {
					type: '企业单位',
					head: '',
					number: '',
					total: '',
					email: '',
				},
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				value1: '',
				cershowId: 0,
				billshowId: 0,
				columnName: '个人中心',
				title: '',
				title2: '',
				acBig: '',
				acSml: '',
				cerList: ['按日期', '按金额'],
				menuList: [{
						id: 1,
						name: '捐赠记录',
						ischildren: false,
					},
					// {
					// 	id: 2,
					// 	name: '已捐项目',
					// 	ischildren: false,
					// },
					// {
					// 	id: 3,
					// 	name: '捐赠证书',
					// 	ischildren: false,
					// },
					// {
					// 	id: 4,
					// 	name: '发票记录',
					// 	ischildren: false,
					// },
					{
						id: 5,
						name: '个人信息',
						ischildren: false,
						children: [{
								id: '1',
								name: "基本信息",

							},
							{
								id: '2',
								name: "修改密码",
							}
						]
					},
				],
				tableData: [],
				userProjects: [],
				donateDetail: {},
				userDonateLogList: [],
				isdetail: 0,
				info: {},
				billId: 0,
				isSearchList: false,
        donateCount: {},
        dialogImageVisible: false,
        currentCert: '',
        isBackHome: false
			};
		},

		created() {
			this.isSearch()
			this.out()
			// this.userProject() //已捐项目
			userInfo().then(response => {
				this.infosizeForm = response.data
			})
		},

		mounted() {},

		methods: {
		  toBackHome() {
        this.acBig = '0'
        this.isBackHome = true
        this.menuList.forEach(item => {
          item.ischildren = false
        })
      },

		  lookCert(cert) {
        this.dialogImageVisible = true
        this.currentCert = cert || 'https://t9.baidu.com/it/u=4169540006,4220376401&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598583598&t=504a0d8076717eebf41ad74ab5779e9a'
      },

      // 新页面打开图片
		  openImg() {
		    console.log(this.currentCert)
        window.open(this.currentCert)
      },

      // 图片下载
      downloadImg() {
        this.downloadByBlob(this.currentCert, '捐赠证书')
      },

      // 创建 canvas，下载
      downloadByBlob(url, name) {
		    let _this = this
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = url
        image.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(image, 0, 0, image.width, image.height)
          canvas.toBlob((blob) => {
            let cacheUrl = URL.createObjectURL(blob)
            _this.downloadByA(cacheUrl, name)
            // 用完释放URL对象
            URL.revokeObjectURL(cacheUrl)
          })
        }
      },

      // 创建 a 标签，下载
      downloadByA(url, name) {
        let eleLink = document.createElement('a')
        eleLink.download = name
        eleLink.href = url
        eleLink.click()
        eleLink.remove()
      },

			isSearch(data){
				console.log(data)
				this.isSearchList=data
			},
			//申请发票
			billform(billId) {
				this.isdetail = 3
				this.billId = billId
			},
			out(data) {
				var _this = this
				if (data) {
					_this.page = 1
					_this.isdetail = 0
					_this.infostatus = true
          var cacheData = JSON.parse(data);
          _this.acBig = cacheData.acBig.toString()
					_this.acSml = cacheData.acSml
					_this.menuList.forEach((value, index) => {
						if (value.id == _this.acBig) {
							_this.title = value.name
							if (!value.children) { //无子
								_this.title2 = ""
								_this.classId = value.apiId
							} else {
								value.children.forEach((a, b) => {
									if (_this.acSml == a.id) {
										console.log(a)
										_this.title2 = a.name
										_this.classId = a.apiId
									}
								})
							}
						}
					})
					if (_this.acBig == "1") {
						_this.getDonater()
					} else if (_this.acBig == "3") {
						this.getDonater()
					} else if (_this.acBig == "4") {
						this.getVoiceList()
					}
				}

				this.isBackHome = false
			},
			// 1捐赠记录
			getDonater() {
				var data = {}
				if (this.acBig == "1") {
					data.size = this.size
					data.page = this.page
				}
				userDonateLogList(data).then(response => {
					if (this.acBig == "1") {
						this.tableData = response.data.list
						this.total = response.data.total
						this.tableData.forEach(v => {
							v.createDate = v.createDate.substring(0, 10)
						})
					} else if (this.acBig == "3") {
						this.userDonateLogList = response.data.list
					}
				})

        userDonateCount().then(response => {
          // console.log(response.data)
          this.donateCount = response.data
        })
			},

			// 发票部分开始
			getVoiceList() {
				invoiceList({
					self: true,
					page: this.page,
					size: this.size
				}).then(response => {
					console.log(response)
					this.List = response.data.list
					this.total = response.data.total
				})
			},
			handleCurrentChange(currentPage) {
				this.page = currentPage;
				if (this.acBig == "1") {
					this.getDonater()
				} else if (this.acBig == "4") {
					this.getVoiceList()
				}
			},
			// 发票部分结束
			handleEdit(index, data) {
				console.log(data);
				this.donateDetail = data
				this.isdetail = 2
			},
			todetail(data) {
				projectDetail({
					id: data
				}).then(response => {
					this.info = response.data
					this.info.title = response.data.projectTitle
					this.info.content = response.data.detail
					this.info.className = "yjxm"
					this.isdetail = 1
				})
			},
			certab: function(index) {
				this.cershowId = index;
				console.log(index)
			},
			billonSubmit() {
				console.log('submit!');
			},
			infoOnSubmit() {
				console.log('submit3!');
        let infosizeForm = JSON.parse(JSON.stringify(this.infosizeForm))

        delete infosizeForm.username
        delete infosizeForm.password
        delete infosizeForm.openid

        if (!infosizeForm.nickname) {
          this.$message({
            message: '姓名不能为空',
            type: 'warning'
          })

          return
        }

        changeInfo(infosizeForm).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '个人信息修改成功',
              type: 'success'
            })
            this.infostatus = true
          }
        })
			},
			modify() {
				this.infostatus = false
			},
			passOnSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
            changePassword({
              password: this.passForm.new,
              oldpassword: this.passForm.pass
            }).then(res => {
              console.log(res)
              this.$message({
                message: '密码修改成功',
                type: 'success'
              })

              // 退出登录事件
              this.$eventBus.$emit('logoutEvent', '/login')
            })
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			userProject() {
				userDonateList().then(response => {
					this.userProjects = response.data
				})
			}
		}
	};
</script>

<style>
.person_dialog .el-dialog {
  width: 370px;
  background: transparent;
  box-shadow: unset;
}

.person_dialog .el-dialog__header, .person_dialog .el-dialog__body {
  padding: 0;
}

.person_dialog .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.person_dialog .dialog_header {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.person_dialog .dialog_header img {
  width: 35px;
  height: 35px;
  cursor: pointer;
  user-select: none;
}

.person_dialog .dialog_body {
  width: 300px;
}

.person_dialog .dialog_body img {
  width: 300px;
  cursor: pointer;
  user-select: none;
}

.person_dialog .dialog_footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.person_dialog .dialog_footer .download_box {
  width: 213px;
  height: 48px;
  margin-top: 30px;
  background: #D3B385;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  line-height: 0;
  color: #FFFFFF;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.person_dialog .dialog_footer .download_box img {
  width: 24px;
  height: 21px;
  margin-right: 10px;
}
</style>
<style scoped>
	.w-cerimgbox {
		position: relative;
		width: 20vw;
		/* min-width: 260px; */
		height: 100%;
		margin-top: 30px;
	}

	.w-cerimgbox img {
		width: 100%;
		display: block;
	}

	.w-conbox {
		position: absolute;
		top: 135px;
		width: 70%;
		margin-left: 15%;
	}

	.w-num {
		color: #551A1A;
		font-size: 8px;
		text-align: center;
		padding-top: .4vw;
	}

	.w-title {
		font-size: 12px;
		color: #360D0D;
		margin-top: 29px;
		font-weight: bold;
	}

	.w-con {
		color: #595A5E;
		font-size: 12px;
		text-indent: 20px;
		margin-top: 20px;
		line-height: 1.6;
	}

	.w-bottombox {
		width: 100%;
		margin-top: 2vw;
		text-align: right;
		line-height: 20px;
		position: absolute;
		bottom: 30px;
		right:15%;
	}

	.w-schoolbox {
		display: inline-block;
		text-align: center;
	}

	.w-school {
		color: #551A1A;
		font-size: 12px;
		line-height: 1.5;
		font-weight: 500;
	}

	.w-date {
		color: #551A1A;
		font-size: 10px;
		text-align: center;
		margin-top: 2px;
		font-weight: 500;

	}

	/* ...................... */
	.w-tabtitle span {
		font-size: 18px;
		font-weight: 400;
		color: rgba(208, 170, 117, 1);
		margin-left: 15px;
		cursor: pointer;
	}


	/* ...................... */
	.tabCon {
		min-height: 800px;
	}

	.w-tablebtn {
		background: none;
		border: none;
		font-size: 16px;
		font-weight: 500;
		color: rgba(118, 42, 42, 1);
	}

	.moneybox {
		margin-right: 84px;
		font-size: 18px;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 15px;
	}

	.w-total {
		color: rgba(118, 42, 42, 1);
	}

	.w-tabcon li {
		padding: 6px 0;
		font-size: 16px;
		color: #333;
	}

	/* ............... */
	/* .w-cerbox {
		width: 33%;
		padding-top: 23px;
		position: relative;
	}

	.w-cerbox img {
		width: 100%;
		position: absolute;
	}
 */
	/* ..................... */
	.w-already li {
		width: 48%;
		padding: 24px 20px;
		margin-bottom: 10px;
		line-height: 1;
		background: rgba(245, 238, 238, 1);
		border-radius: 10px;
		font-size: 18px;
		font-weight: 400;
		color: rgba(118, 42, 42, 1);
		text-align: center;
		cursor: pointer;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		box-sizing: border-box;

	}

	/* 详情duyou */
	.w-detailtabcon p {
		text-indent: 30px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		text-align: justify;
	}

	.w-detailtabcon img {
		display: block;
		max-height: 334px;
		max-width: 420px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 40px;
	}

	.w-targetbox {
		margin-bottom: 50px;
		line-height: 1;
	}

	.tar1 {
		padding: 10px 0;
		font-size: 18px;
		color: rgba(51, 51, 51, 1);
	}

	.tar2 {
		padding: 10px 0;
		font-size: 16px;
		color: rgba(51, 51, 51, 1);
	}

	.w-a {
		padding: 10px 16px;
		background: #791C1C;
		color: #fff;
		line-height: 1;
		border-radius: 5px;
		font-size: 18px;
		margin-right: 25px;
		cursor: pointer;

	}

	.clickimg {
		width: 28px;
		height: 28px;
		display: block;
		margin-left: 13px;
	}

	/* 证书 */
	.ceractive {
		background: #B57775;
		color: #fff;
	}

	.w-huan {
		width: 20px;
		margin-left: 4px;
		display: block;
	}

	.cerli {
		padding: 11px 14px;
		border-radius: 8px;
		margin-bottom: 40px;
	}

	.cerli p {
		font-size: 14px;
	}

	.cerli .huan0 {
		display: none;
	}

	.ceractive .huan1 {
		display: none;
	}

	.ceractive .huan0 {
		display: block;
	}

	.cershow img {
		display: block;
		width: 18%;
		margin-right: 2%;
		margin-bottom: 33px;
	}

	/* .........发票............ */
	.el-select {
		width: 130px;
		font-size: 14px;
		margin-left: 20px;
		background: #B57775;
		color: #fff;
		margin-bottom: 37px;
		border-radius: 5px;
		overflow: hidden;

	}

	.w-box4-2 .el-select {
		width: 100%;
		margin-left: 0;
	}

	.billul li {
		padding: 17px 22px 36px;
		box-sizing: border-box;
		border-radius: 5px;
		background: #F5EEEE;
		margin-bottom: 12px;
	}

	.billul li div {
		width: 50%;
		padding-top: 23px;
		font-size: 16px;
		color: #333;
	}

	.w-billformbox .w-billform {
		background: #772A2B;
		color: #fff;
		padding: 10px 16px;
		line-height: 1;
		border-radius: 5px;
		text-align: center;
		font-size: 18px;
		cursor: pointer;
	}

	.w-billformbox .w-billform:hover {
		box-shadow: 0px 3px 30px 1px rgba(0, 0, 0, .1);
	}
	.w-billformbox .clickimg {
		width: 28px;
		height: 28px;
		display: block;
		margin-left: 13px;
	}
</style>
<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}

	.w-card-left {
		width: 26%;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}



	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	/* 面包屑 */
	.w-page .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-page .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-page.el-breadcrumb__inner a:hover,
	.el-breadcrumb__inner.is-link:hover {
		color: #692324;
	}

	.w-person .el-pager li {
		border: 1PX solid #9C9A9B;
		margin: 0 7px;
		font-size: 14px;
		font-weight: 300;
		border-radius: 3px;
	}

	.w-person .el-pager li.active+li {
		border: 1PX solid #9C9A9B;
	}

	.w-person .el-pager li.active {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-person .el-pager li:hover {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-person .el-pagination {
		text-align: center;
		margin-top: 30px;
	}

	/* table修改样式 */
	.w-person .el-table__header .has-gutter tr {
		background: #B47873;
		color: #fff;
	}

	.w-person .el-table th {
		background: #B47873;
	}

	.w-person .el-table--striped .el-table__body tr.el-table__row--striped td {
		background: #F5EEEE;
	}

	.w-person .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #fff;
	}

	.w-person .el-table--striped .el-table__body tr.el-table__row--striped td {
		background: #F5EEEE;
	}

	.w-person .el-table th>.cell {
		text-align: center;
		color: #fff;
		font-size: 16px;


	}

	.w-person .el-table .cell {
		text-align: center;
		line-height: 1.5;
		font-size: 16px;
	}

	.w-person .el-table td {
		border: none;

	}

	.w-person .el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		display: none;
	}

	.w-person .el-table tr td:first-child .cell {
		color: rgba(118, 42, 42, 1);
	}

	.w-person .el-select .el-input__inner {
		border: none;
		background-color: rgba(255, 255, 255, 0);
		color: #fff;
	}

	.w-person .el-select .el-input__inner::-webkit-input-placeholder {
		color: #fff;
	}

	.w-person .el-select .el-input__inner:-moz-placeholder {
		color: #fff;
	}

	.w-person .el-select .el-input__inner::-moz-placeholder {
		color: #fff;
	}

	.w-person .el-select .el-input__inner:-ms-input-placeholder {
		color: #BDCADA;
	}

	.w-person .el-select .el-input .el-select__caret {
		color: #fff;
	}

	.w-person :root {
		--swiper-theme-color: #B57775;
	}

	.w-person .el-select-dropdown__item.selected {
		color: #B57775;
	}

	.w-person .tabCon .el-form {
		width: 80%;
	}

	.w-person .tabCon .el-form-item__label {
		height: 46px;
		line-height: 46px;
		color: #333;
		font-size: 18px;
	}

	.w-person .tabCon .el-form-item__content {
		background: rgba(249, 249, 249, 1);
		border-radius: 6px;
		height: 46px;
		line-height: 46px;
	}

	.user_info_edit .el-form-item:first-child .el-form-item__content {
		background: none;
		font-size: 14px;
	}

	.w-person .tabCon .el-form-item .el-button {
		width: 100%;
		background: #CFA972;
		color: #fff;
		height: 46px;
		line-height: 16px;
		border-radius: 6px;
		border: none;
		/* margin-top: 60px; */
	}

	.w-person .tabCon .el-form-item .el-button:hover,
	.w-person .tabCon .el-form-item .el-button:focus {
		outline: none;
		list-style: none;
		border: none;
		background: #CFA972;
		color: #fff;
		border-radius: 6px;
		border: none;
	}

	.w-person .tabCon .el-form-item .el-radio.is-bordered {
		border: none;
	}

	.w-person .tabCon .el-form-item .el-radio__input.is-checked+.el-radio__label {
		color: #CFA972;
	}

	.w-person .tabCon .el-form-item .el-radio__input.is-checked .el-radio__inner {
		border-color: #CFA972;
		background: #CFA972;
	}

	.w-person .tabCon .el-form-item .el-radio__inner:hover {
		border-color: #CFA972;
	}

	.w-person .tabCon .el-form-item .el-radio {
		padding-left: 20px;
	}

	.w-person .tabCon .el-input__inner {
		border: none;
		background-color: rgba(255, 255, 255, 0);
	}

	.w-person .el-select-dropdown__item.selected {
		color: #B57775;
	}

	/* ...................... */
	.w-person .w-box4-2 .el-select {
		background: #fff;
		border: 1PX solid #CFA972;
	}

	.w-person .w-box4-2 .el-select .el-input__inner::-webkit-input-placeholder {
		color: #333333;
	}

	.w-person .w-box4-2 .el-select .el-input__inner:-moz-placeholder {
		color: #333333;
	}

	.w-person .w-box4-2 .el-select .el-input__inner::-moz-placeholder {
		color: #333333;
	}

	.w-person .w-box4-2 .el-select .el-input__inner:-ms-input-placeholder {
		color: #333333;
	}

	.w-person .w-box4-2 .el-select .el-input .el-select__caret {
		color: #333333;
	}

	.w-person .w-box4-2 .el-select .el-input__inner {
		color: #333333;
	}

	.w-person .el-select-dropdown__item.selected {
		color: #333333
	}

	.w-person .el-table tr:last-child td {
		border-bottom: 1PX solid #EBEEF5;
		/* border-bottom: 1PX solid red; */
	}
</style>
